/*
 * @Description: 
 * @version: 0.0.1
 * @Author: 小妖怪
 * @Date: 2021-07-25 11:59:50
 * @LastEditors: Mr.小妖怪
 * @LastEditTime: 2022-03-05 09:05:53
 * @FilePath: \study_typescript\demo\part3\demo\webpack.config.js
 */

const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // 告知 webpack 不使用箭头函数
    environment: {
      arrowFunction: false,
      const: false
    }
  },
  module: {
    rules: [{
      test: /\.ts$/,
      use: [
        // 配置babel
        {
          loader: 'babel-loader',
          options: {
            // 设置预定义环境
            presets: [
              [
                '@babel/preset-env',
                // 配置信息
                {
                  // 兼容的目标浏览器版本
                  // targets: {
                  //   'chrome': '88 ',
                  //   // 'ie': '11'
                  // },
                  // 'corejs': '3',
                  // // 使用 corejs 的 usage 方式，表示按需加载
                  // 'useBuiltIns': 'usage'
                }
              ]
            ]
          }
        },
        'ts-loader'
      ],
      exclude: /node_modules/
    }, {
      // 设置 less 文件处理
      test: /\.less/,
      use: [
        'style-loader',
        'css-loader',
        'less-loader',
        // 引入 postcss
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('tailwindcss'),
                [
                  'postcss-preset-env',
                  {
                    browsers: 'last 2 versions'
                  }
                ]
              ]
            }
          }
        }
      ]
    }]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // title: '自定义title',
      template: './src/index.html'
    })
  ],
  // 用来设置引用模块
  resolve: {
    extensions: ['.ts', '.js']
  }
}